NEO Style & Design Guide

Identity

Applying the Style Guide to create the UI of the Bristlecone NEO® Platform will ensure enhanced User experience ,it is important to condition the User to a certain consistent pattern of look and feel of the application

Colors

A full spectrum of color palettes, suited for UI design that work harmoniously with brand colors. Consistent and appropriate usage of the color palette creates an ordered cohesive look and feel within and all the Applications developed using Bristlecone NEO® Platform


Primary Colors

  • #fffff
  • rgba(255,255,255)
  • #105cb5
  • rgba(16,92,181)
  • #004389
  • rgba(0,67,137)
  • #4b80ba
  • rgba(75,128,186)
  • #022751
  • rgba(2,39,81)
  • #005d84
  • rgba(0,93,132)
  • #565656
  • rgba(86,86,86)
  • #292929
  • rgba(41,41,41)

Secondary Colors

  • #e7e6e8
  • rgba(231,230,232)
  • #cfcecf
  • rgba(207,206,207)
  • #b7b7ba
  • rgba(183,183,186)
  • #a0a0a3
  • rgba(160,160,163)
  • #8a8a8d
  • rgba(138,138,141)
  • #d0d1ec
  • rgba(208,209,236)
  • #e82020
  • rgba(232,32,32)
  • #418532
  • rgba(65,133,50)
  • #ffa500
  • rgba(255,165,0)

Icons

In addition to conveying brand personality through an appealing visual presentation of color and style, Bristlecone NEO® Platform icons are designed to communicate the functionality of a specific attribute for an effective User Experience.


152x152
120x120
76x76
50x50
32x32
16x16

152x152
152x152
76x76
50x50
32x32
16x16

We are using "https://fontawesome.com" icon library. Incase of non-availability of icons in fontawesome library, we will provide them as image.


Icon Name Fontawesome Class Link
Home class="fas fa-home" https://fontawesome.com/icons/home?style=solid
Notification class="fas fa-bell" https://fontawesome.com/icons/bell?style=solid
User class="fas fa-user-circle" https://fontawesome.com/icons/user-circle?style=solid
Setting class="class="fas fa-cog" https://fontawesome.com/icons/cog?style=solid
Help class="fas fa-question-circle" https://fontawesome.com/icons/question-circle?style=solid
Info class="fas fa-info-circle" https://fontawesome.com/icons/info-circle?style=solid
Logout class="fas fa-sign-out-alt" https://fontawesome.com/icons/sign-out-alt?style=solid
Arrow Up class="fas fa-angle-up" https://fontawesome.com/icons/angle-up?style=solid
Arrow Down class="fas fa-angle-down" https://fontawesome.com/icons/angle-down?style=solid
Arrow Right class="fas fa-angle-right" https://fontawesome.com/icons/angle-right?style=solid
Arrow Left class="fas fa-angle-left" https://fontawesome.com/icons/angle-left?style=solid
Caret Up class="fas fa-caret-up" https://fontawesome.com/icons/caret-up?style=solid
Caret Down class="fas fa-caret-down" https://fontawesome.com/icons/caret-down?style=solid
Caret Right class="fas fa-caret-right" https://fontawesome.com/icons/caret-right?style=solid
Caret Left class="class="fas fa-caret-left"" https://fontawesome.com/icons/caret-left?style=solid
Download class="fas fa-caret-right" https://fontawesome.com/icons/download?style=solid
Cloud-Download class="fas fa-cloud-download-alt" https://fontawesome.com/icons/cloud-download-alt?style=solid
Cloud-Upload class="fas fa-cloud-upload-alt" https://fontawesome.com/icons/cloud-upload-alt?style=solid
Refresh class="fas fa-sync-alt" https://fontawesome.com/icons/sync-alt?style=solid
Create class="fas fa-plus-circle" https://fontawesome.com/icons/plus-circle?style=solid
Edit class="fas fa-pencil-alt" https://fontawesome.com/icons/pencil-alt?style=solid
View / Read class="fas fa-eye" https://fontawesome.com/icons/eye?style=solid
Delete class="fas fa-trash-alt" https://fontawesome.com/icons/trash-alt?style=solid
Search class="fas fa-search" https://fontawesome.com/icons/search?style=solid
Filter class="fas fa-filter" https://fontawesome.com/icons/filter?style=solid
Expand class="fas fa-expand-arrows-alt" https://fontawesome.com/icons/expand-arrows-alt?style=solid
Calendar class="fas fa-calendar-alt" https://fontawesome.com/icons/calendar-alt?style=solid
History class="fas fa-history" https://fontawesome.com/icons/history?style=solid
Received class="fas fa-arrow-down" https://fontawesome.com/icons/arrow-down?style=solid
File class="fas fa-file" https://fontawesome.com/icons/file?style=solid
Database class="fas fa-database" https://fontawesome.com/icons/database?style=solid

Icon's, those are not available in repository (Fontawesome library) - Lighter version


Icon Image Icon Name Icon Image Icon Name
Update Expand
Attach Detach
Steps Steps (grey)
Collapse Select All (dark)
Cloud Upload - light Cloud Upload - dark
Update Postgre SQL
Right Tick

Icon's, those are not available in repository (Fontawesome library) - Darker version


Icone Image Icon Name Icone Image Icon Name
Analytics Engine Data Lake
Data pipeline Security
Custom Jobs Data Catalog
Data Ingestion Data Model
Data Profiling Data Target
Data Transformation Data Validation
Pre Processing Post Processing
Select All (light) Deploy
Info Market Place
Publish Users
Apps

Typography

Typography imbibed in the UI of Bristlecone NEO® Platform involves style, appearance, and structure, which aims to sustain international engineering design standards.

At the heart of good typography is a good typeface. We are using "Open Sans", "Roboto" and "Roboto Condensed" to design one that reflects our brand and personality, while also maintaining versatility to address diverse applications, from massive billboards to miniscule UI text.

For Page Headers / Tab Headers / Section Headers: https://fonts.google.com/specimen/Open+Sans

For any other labels on screen, column headers in tables etc: https://fonts.google.com/specimen/Roboto+Condensed & Roboto+Thin

For Default content, Form components (text box, drop downs, column rows) where actual data content is shown https://fonts.google.com/specimen/Roboto


Type Sizes


We use different type sizes and weights to convey a visual


Type Size Font Weight Usage

Heading 1 (h1)

 2.2rem - 40px Regular Page headers, Summary Panel headers

Heading 2 (h2)

 2rem - 32px Regular Section headers, Panel headers

Heading 3 (h3)

 1.75rem - 28px Regular, Bold Section headers

Heading 4 (h4)

 1.5rem - 24px Regular, Thin General, Component header
Heading 5 (h5)
 1.25rem - 20px Regular General
Paragraph 1rem - 16px Regular Paragraph, Navigation
Note 1rem - 16px Regular, Semi-Bold Label
Body 0.875rem - 14px Regular, Semi-Bold Body content, Article, Tooltips
Form 0.875rem - 14px Regular, Semi-Bold Components


Layouts

Bristlecone NEO® Platform Layouts are defined at a high-level structure using a standard Protype developed using Axure. Layouts as a visual design framework that is designed as per the clients requirement ensures a pixel level precision across all components

Grid/Data Tables

Bristlecone NEO® Grid/Data Tables are designed to allow sorting, multi-selection, batch actions based on specific functionalities associated with a feature


Typical 12 column Grid based Layout


four columns two rows
four columns three rows
four columns
four columns
three columns
one
one
three columns
six columns
three columns
three columns
twelve columns

Tiles


Bristlecone NEO® Grid/Data Tables are designed to allow sorting, multi-selection, batch actions based on specific functionalities associated with a feature


AvatarAvatar Avatar

App Title Here

Bristlecone Labs
Avatar

App Title Here

Bristlecone Labs

App Enabled Color Code : #418532

App Requested Color Code : #ffa500

App Access Denied/Locked color Code : #e82020

App Unlock color Code : #e82020

App Blocked color Code : #bcbcbc


Components

Bristlecone NEO® Components are designed to enable the User to navigate , perform actions ( feature specific ) through various features across the Platform

Accordion

Accordions offer progressive disclosure - highlighting feature specific information. Design stays focused on displaying critical information on the overview while revealing further details upon a tap or click if necessary

Accordion Example Accordion Layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Alerts

Alert Dialogues uses affirmative action texts that communicate the outcome of decision throughout the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action.

Color code for Error, Success, Warning & Info :


Error : Red - #E82020

Success : Green - #418532

Warning : Orange - #ffa500

Info : Blue - #105cb0


   

Autocomplete

Autocomplete offers a robust search-as-you-type function that matches a user’s search with accurate prediction

Autocomplete Example Autocomplete Specification
Specifications:
Border Color: #8a8a8d
Font Color Code: #141414
Hover Color Code:#e9e9e9

Breadcrumb

Offers Location breadcrumbs that guide the User to navigate across various pages, features throughout the Bristlecone NEO® Platform

Breadcrumb Model Spacing Specification

Home   /   Level1  /  Level2   /   Level3

 Link Color Code: #105cb5
Line Color Code : #141414
Line size : 1px

Buttons

Bristlecone NEO Platform provides the following variants of Buttons along with the functionalities


Type Model Specification
Primary Button: Save, Delete, Update, View
Reset Button: Reset, Cancel
Background Color:#f3f3f3
Border Color:#fff
Font Color: #000
Disabled Button
Background Color:#f3f3f3
Font Color:#000
Text Button: Menu
Link Font Color:#105cb5;
Button with Icon
Background Color:#105cb5
Font Color:#fff;
Toggle Button: Enable, Disable

Checkboxes

User will be able to make binary choices using the following variants of Checkboxes

Checkbox Examples Checkbox Specification
Background Color: #f7f7f7
Border Color: #8a8a8a
Background Color : #105cb5
Border Color: #8a8a8a
Select-Color:#fff
Background Color: #105cb5
Border Color: #8a8a8a
Select-Color:#fff
Background Color: #f7f7f7
Border Color: #8a8a8a

Note: All checkboxes are mutually exclusive

Color Picker


An extensive collection of colors with largest collections of shades to enhance user experience with zero complexities.

Use can avail the palette chooser to create a series of colors that are visually equidistant.


Data Grid

Bristlecone NEO® Platform Data Grids are built using Bootstrap (v4.3.1) framework and follows the standard 12 column fluid. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Model Data Grid

Client Sunday Monday Tuesday Wednesday Thursday Friday Saturday
Lawrence Scott 8:00 AM -- -- - -- 5:00 PM 8:00 AM
Jane Medina -- 5:00 PM 5:00 PM -- 9:00 AM -- --
Billy Mitchell 9:00 AM -- -- -- -- 2:00 PM 8:00 AM
Beverly Reid -- 5:00 PM 5:00 PM -- 9:00 AM -- --
Tiffany Wade 8:00 AM -- -- 8:00 AM -- 5:00 PM 8:00 AM

Data Grid Specification

Date Picker

Bristlecone NEO® Platform provides a prepopulated range of values that contain the following granularities :

  • 1. Date
  • 2. Month
  • 3. Year
  • 4. A Place holder that displays the current time alone with date in the format DD/MM/YYYY, HH/MM AM/PM

It also provides “previous”, “current” navigation for the above time parameters


Model Representation of Date Picker Specification

Border Color : #8a8a8d
Font Color : #141414

Dropdown List

Bristlecone NEO® Platform provides a prepopulated range of values listed in the alphabetical order with equal spacing between any consecutive pair of values

Model Representation of Dropdown List Specification

File Upload

Bristlecone NEO® Platform provides an option for the user to upload files using the “Browse” button

Upload a File

Header

Bristlecone NEO® Platform provides a space saving menu that complements the User Interface and opens a navigation link ( back navigation ) upon a click and allows the user to directly access a page in the most minimal time and navigate to previous pages using the back button


Model Hamburger Navigation Icon (Click)

Header Model Specification
Spacing between hamburger menu and Logo

Hyperlinks

Bristlecone NEO® Platform defines the style of links, which is blue underlined text. Visited Links are colored in purple


Hyperlinks Model Specification
Normal Hyperlink Color: #105cb5, Text-Decoration: Underline
Disabled Hyperlink Color: #a0a0a0, Text-Decoration: Underline
Visited Hyperlink Color: #6c2dff, Text-Decoration: Underline
Normal Hyperlink without underline Color: #105cb5, Text-Decoration: None

Input/Text Box

Bristlecone NEO® Platform provides outlined single lined text fields without or with independent labels with rounded corner ( 2px each )


Input Text Box Model Specification

Following are the various validation cases
Error Specification on Input Box
Border Color: #e82020
Font Color: #e82020
Success Specification on Input Box
Border Color: #418532
Font Color: #418532
Specification of Corner Radius of Input Box
Border Radius : 4
Border : 1px

Text Area

Bristlecone NEO® Platform provides text fields with or without place holders to support medium sized texts


Specification

Modal/Popup/Prompt

Bristlecone NEO® Platform Modal is a dialog box/popup window which can be used for lightboxes, user notifications, UI enhancements, e-commerce components and many other cases.

It's easily customized to manipulate size, position, and content


Click to view the Modal Popup

Multi Select

Bristlecone NEO® Platform provides textbox control that allows the user to type or select multiple values from a list of predefined options. It has several out-of-the-box features such as data binding, filtering, grouping, tagging with custom values, and checkbox mode.


Model Representation of Multiselect Dropdown Specification

Border Color : #8a8a8d
Font Color : #141414

Progress Indicator

Bristlecone NEO® Platform provides Linear progress indicators that display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known


Model Progress Bar

10%



Specification for the Progress Bar

Radios

Radio Buttons /Selection controls allow users to complete tasks that involve making choices such as selecting options or switching settings on or off. Selection controls are found on screens that ask users to make decisions or declare preferences such as settings or dialogs

Bristlecone NEO® Platform Radio buttons are predominantly used to

  • 1. Select a single option from a list
  • 2. Expose all available options

Specification for the Radio Button

Radios Model Specification

Side Toggle

Bristlecone NEO® Platform Slide Toggle prompts users to choose between two mutually exclusive options and always have a default value. These toggles provide immediate results, giving users the freedom to control their preferences as needed

Specification Model Representation of Side Toggle


Sidebar Header ×

Some text in the Body

Some other text...


Tabs

Bristlecone NEO® Platform allows users to quickly move between a small number of equally important views and bring a real-world element to the web and mobile based applications. Bristlecone NEO® tabs provide excellent user interface control that contribute towards improving usability.

Model Tabs (Click to view)

Features


Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Roles


It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.


Specification for the Tabs (Horizontal)

Utilities

Bristlecone NEO® Utilities comprises the following features :

Drag/File Selector

Bristlecone NEO® Platform provides a File Selector to drag the file / choose a file from a specified folder using the Browse button. Post selection Click on Upload

Model Drag or File Selector

Select Files:

Visibility

Bristlecone NEO® Platform follows Material Design for all UX standards

Accessibility

Bristlecone NEO® Platform provides accessibility in design that enables users of diverse abilities to navigate, understand, and design the UI as per the business requirements. We have taken references from Material Design, WCAG 2.0, Section 508 Standards

Charts

This feature will be documented as a part of subsequent releases